<template>
	<div class="page">
		<div class="login-logo">
			<img src="../assets/gezilogo.png" style="width:150px;height:150px;" />
			<br />
			登录鸽子网，与1000万+名鸽一起咕咕咕、分享快乐吧！
		</div>
		<div class="box">
			<div class="box-label">注册</div>
			<input class="text-input" type="text" name="username" v-model="loginName" placeholder="手机号或邮箱" />
			<input class="text-input" type="text" name="user" v-model="nickName" placeholder="用户昵称" />
			<input class="text-input" type="password" name="pwd" v-model="password" placeholder="密码" />
			<input class="text-input" type="password" name="pwds" v-model="repeatPassword" placeholder="重复密码" />

			<div class="register">
				<input type="button" class="btn-current-big btn-default-main loadding-btn" value="注册" @click="doRegist" />
			</div>
			<div class="small">未注册手机验证后自动登彖，注册即代表同意《注册协议》《隐私保护指引》 </div>

		</div>
		<div class="footer login-footer">
			<p>来自实训中并不能战斗的特种兵们，每天努力敲代码咕咕咕。</p>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				loginName: '',
				nickName: '',
				password: '',
				repeatPassword: ''
			}
		},
		methods: {
			doRegist() {
				if (this.loginName.length == 0 || this.nickName.length == 0 || this.password.length == 0 || this.repeatPassword.length ==
					0) {
						this.$message.error('请输入完整的注册信息');
					
					return;
				}
				if (this.password != this.repeatPassword) {
					this.$message.error('两次输入的密码不一致');
					
					return;
					
				}
				this.$http.post("/api/register",{
					lastName: this.nickName,
					login: this.loginName,
					password: this.password
				}).then((result)=>{
					console.log("register doRegist result", result);
					this.$message.success("注册成功");
					setTimeout(() => {
						this.$router.back();
					}, 1500);
				})
				
			}
		}
	}
</script>

<style scoped>
	.small {
		padding-top: 20px;
		padding-bottom: 40px;
		color: #888888;
		font-size: 30%;
		text-align: left;
		margin: 10px auto;
		width: 90%;
	}

	.login-logo {
		margin: 0, auto;
		color: #fff;
		font-size: 18px;
		text-align: center;
		padding: 20px 0 30px;
		display: block;
	}

	.register {
		margin-bottom: 20px;
	}

	.btn-current-big {
		width: 336px;
		height: 42px;
		font-size: 16px;
	}

	.btn-disabled {
		color: #bbb;
		background: #eee;
		border: 1px solid #eee;
		border-radius: 4px;
		text-align: center;
		cursor: default;
	}

	.loadding-btn {
		cursor: default;
	}

	.btn-default-main {
		color: #444;
		background: #ffe300;
		border: 1px solid #ffe300;
		border-radius: 4px;
		text-align: center;
		height: 42px;
	}

	.text-input {
		height: 30px;
		width: 90%;
		color: #000;
		padding-top: 10px;
		padding-bottom: 10px;
		background: transparent;
		border: none;
		border-bottom: 1px solid #e8e8e8;
		font-size: 50%;
		outline: none;
		margin: 10px auto;
		text-align: left;
	}

	.hide {
		display: none;
	}

	input::-webkit-input-placeholder {
		color: #aaaaaa;
	}

	.box-label {
		font-size: 120%;
		font-weight: 400;
		color: #000;
		padding-top: 10px;
		padding-bottom: 20px;
		border-bottom: 3px solid #282828;
		width: 300rpx;
		text-align: left;
		margin-left: 5%;
		margin-bottom: 10px;
	}

	.box {
		width: 336px;
		min-height: 400px;
		background: #ffffff;
		position: relative;
		margin: 0 auto;
		padding: 30px 32px;
		box-shadow: 0px 1px 12px 0px rgba(0, 0, 0, 0.2);
		display: block;
	}

	.page {
		font-family: "微软雅黑";
		margin: 0;
		padding: 0;
		height: 900px;
		width: 100%;
		min-height: 100%;
		min-width: 900px;
		box-sizing: border-box;
		position: relative;
		display: block;
		background: url(../assets/350.jpg) no-repeat;
	}

	.login-footer {
		margin-top: 20px;
		color: #fff;
	}
</style>
